<template>
  <div class="container row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-sx-12">
      <div class="message">
        <div class="comment-head"><h2>留言板</h2></div>
        <div class="comment-edit">
            <div class="user-info">
              <input type="text" v-model="anwserInfo.messageName" placeholder="昵称">
              <input type="email" v-model="anwserInfo.messageEmail" placeholder="邮箱">
              <div v-if="isanwser" class="anwser_name">

                <input type="text"  v-model="anwserInfo.anwserName" disabled placeholder="回复ta">
                <button @click="cancelAnwser" style="width: 50px">取消</button>
              </div>
            </div>
            <textarea id="area" style="resize: none" v-model="anwserInfo.messageContent" autofocus placeholder="留下你的足迹~"></textarea>
            <div class="control">
              <div><div class="enjoy" @click="enjoycontrol"><span class="iconfont iconhanhan-01-01"></span>表情</div></div>
              <div><div class="send" @click="sendMessage(anwserInfo)"><button>发送</button></div></div>
            </div>
          <div class="enjoys" v-show="isactive">
            <i name="grinning" title="grinning">😀</i>
            <i name="smiley" title="smiley">😃</i>
            <i name="smile" title="smile">😄</i>
            <i name="grin" title="grin">😁</i>
            <i name="laughing" title="laughing">😆</i>
            <i name="sweat_smile" title="sweat_smile">😅</i>
            <i name="joy" title="joy">😂</i>
            <i name="blush" title="blush">😊</i>
            <i name="innocent" title="innocent">😇</i>
            <i name="wink" title="wink">😉</i>
            <i name="relieved" title="relieved">😌</i>
            <i name="heart_eyes" title="heart_eyes">😍</i>
            <i name="kissing_heart" title="kissing_heart">😘</i>
            <i name="kissing" title="kissing">😗</i>
            <i name="kissing_smiling_eyes" title="kissing_smiling_eyes">😙</i>
            <i name="kissing_closed_eyes" title="kissing_closed_eyes">😚</i>
            <i name="yum" title="yum">😋</i>
            <i name="stuck_out_tongue_winking_eye" title="stuck_out_tongue_winking_eye">😜</i>
            <i name="stuck_out_tongue_closed_eyes" title="stuck_out_tongue_closed_eyes">😝</i>
            <i name="stuck_out_tongue" title="stuck_out_tongue">😛</i>
            <i name="sunglasses" title="sunglasses">😎</i>
            <i name="smirk" title="smirk">😏</i>
            <i name="unamused" title="unamused">😒</i>
            <i name="disappointed" title="disappointed">😞</i>
            <i name="pensive" title="pensive">😔</i>
            <i name="worried" title="worried">😟</i>
            <i name="confused" title="confused">😕</i>
            <i name="persevere" title="persevere">😣</i>
            <i name="confounded" title="confounded">😖</i>
            <i name="tired_face" title="tired_face">😫</i>
            <i name="weary" title="weary">😩</i>
            <i name="angry" title="angry">😠</i>
            <i name="rage" title="rage">😡</i>
            <i name="no_mouth" title="no_mouth">😶</i>
            <i name="neutral_face" title="neutral_face">😐</i>
            <i name="expressionless" title="expressionless">😑</i>
            <i name="hushed" title="hushed">😯</i>
            <i name="frowning" title="frowning">😦</i>
            <i name="anguished" title="anguished">😧</i>
            <i name="open_mouth" title="open_mouth">😮</i>
            <i name="astonished" title="astonished">😲</i>
            <i name="dizzy_face" title="dizzy_face">😵</i>
            <i name="flushed" title="flushed">😳</i>
            <i name="scream" title="scream">😱</i>
            <i name="fearful" title="fearful">😨</i>
            <i name="cold_sweat" title="cold_sweat">😰</i>
            <i name="cry" title="cry">😢</i>
            <i name="disappointed_relieved" title="disappointed_relieved">😥</i>
            <i name="sob" title="sob">😭</i>
            <i name="sweat" title="sweat">😓</i>
            <i name="sleepy" title="sleepy">😪</i>
            <i name="sleeping" title="sleeping">😴</i>
            <i name="mask" title="mask">😷</i>
            <i name="smiling_imp" title="smiling_imp">😈</i>
            <i name="smiley_cat" title="smiley_cat">😺</i>
            <i name="smile_cat" title="smile_cat">😸</i>
            <i name="joy_cat" title="joy_cat">😹</i>
            <i name="heart_eyes_cat" title="heart_eyes_cat">😻</i>
            <i name="smirk_cat" title="smirk_cat">😼</i>
            <i name="kissing_cat" title="kissing_cat">😽</i>
            <i name="scream_cat" title="scream_cat">🙀</i>
            <i name="crying_cat_face" title="crying_cat_face">😿</i>
            <i name="pouting_cat" title="pouting_cat">😾</i>
            <i name="cat" title="cat">🐱</i>
            <i name="mouse" title="mouse">🐭</i>
            <i name="cow" title="cow">🐮</i>
            <i name="monkey_face" title="monkey_face">🐵</i>
            <i name="hand" title="hand">✋</i>
            <i name="fist" title="fist">✊</i>
            <i name="v" title="v">✌️</i>
            <i name="point_up" title="point_up">👆</i>
            <i name="point_down" title="point_down">👇</i>
            <i name="point_left" title="point_left">👈</i>
            <i name="point_right" title="point_right">👉</i>
            <i name="facepunch" title="facepunch">👊</i>
            <i name="wave" title="wave">👋</i>
            <i name="clap" title="clap">👏</i>
            <i name="open_hands" title="open_hands">👐</i>
            <i name="+1" title="+1">👍</i>
            <i name="-1" title="-1">👎</i>
            <i name="ok_hand" title="ok_hand">👌</i>
            <i name="pray" title="pray">🙏</i>
            <i name="ear" title="ear">👂</i>
            <i name="eyes" title="eyes">👀</i>
            <i name="nose" title="nose">👃</i>
            <i name="lips" title="lips">👄</i>
            <i name="tongue" title="tongue">👅</i>
            <i name="heart" title="heart">❤️</i>
            <i name="cupid" title="cupid">💘</i>
            <i name="sparkling_heart" title="sparkling_heart">💖</i>
            <i name="star" title="star">⭐️</i>
            <i name="sparkles" title="sparkles">✨</i>
            <i name="zap" title="zap">⚡️</i>
            <i name="sunny" title="sunny">☀️</i>
            <i name="cloud" title="cloud">☁️</i>
            <i name="snowflake" title="snowflake">❄️</i>
            <i name="umbrella" title="umbrella">☔️</i>
            <i name="coffee" title="coffee">☕️</i>
            <i name="airplane" title="airplane">✈️</i>
            <i name="anchor" title="anchor">⚓️</i>
            <i name="watch" title="watch">⌚️</i>
            <i name="phone" title="phone">☎️</i>
            <i name="hourglass" title="hourglass">⌛️</i>
            <i name="email" title="email">✉️</i>
            <i name="scissors" title="scissors">✂️</i>
            <i name="black_nib" title="black_nib">✒️</i>
            <i name="pencil2" title="pencil2">✏️</i>
            <i name="x" title="x">❌</i>
            <i name="recycle" title="recycle">♻️</i>
            <i name="white_check_mark" title="white_check_mark">✅</i>
            <i name="negative_squared_cross_mark" title="negative_squared_cross_mark">❎</i>
            <i name="m" title="m">Ⓜ️</i>
            <i name="i" title="i">ℹ️</i>
            <i name="tm" title="tm">™️</i>
            <i name="copyright" title="copyright">©️</i>
            <i name="registered" title="registered">®️</i>
          </div>
        </div>
        <div class="loading">
          <loading v-if="isloading"></loading>
        </div>

        <div class="comment-show">
          <div class="comment-show-title"><span> {{ totalCount }} </span><h2>评论</h2></div>

          <div class="user-comment" v-for="(user,index) in dataList">
            <div class="photo"> <img src="../../../assets/images/sky.jpg"></div>
            <div class="user-name-time">
              <div class="username">{{user.messageName}}</div>
              <div class="comment-time">{{getTime(user.messageDate)}}</div>
            </div>
            <div class="comment-info">{{ user.messageContent }}<label for="area" @click="replyMessage(user.messageId,user.messageName)" class="back">回复</label></div>

            <div class="sub_comment">
              <div class="user-comment" v-for="(subuser,index) in user.subComments">
                <div class="sub_photo"> <img src="../../../assets/images/sky.jpg"></div>
                <div class="user-name-time">
                  <div class="username">{{subuser.messageName}}</div>
                  <div class="comment-time">{{getTime(subuser.messageDate)}}</div>
                </div>
                <div class="comment-info sub_comment_info">
                  <span>{{subuser.anwserName }}</span>{{ subuser.messageContent }}
                  <label @click="replyMessage(user.messageId,subuser.messageName)" for="area" class="back">回复</label></div>
              </div>
            </div>
          </div>
          <LimitControl @receiveData="receiveData" :config="limitConfig" />
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import {request} from "../../../axios";
import LimitControl from "../../common/LimitControl";
import Loading from "./Loading";

export default {
  name: "Message",
  components:{
    LimitControl,Loading
  },
  data(){
    return{
      isanwser:false,
      isactive:false,
      isloading:true,
      totalCount:0,
      anwserInfo:{
        messageId:'',
        userId:1,
        messageName:'',
        messageContent:'',
        messageDate:'',
        messageFaId:0,
        messageLike:0,
        messageEmail:'',
        anwserName:'',
      },
      dataList:[],
      currequest:{
        addUrl:'/backend/addcommentdetails',
        countUrl: '/backend/getallcommentcount',
      },
      limitConfig:{
        url:'/backend/getcommentdetailsbylimit',
        countUrl: '/backend/getallcommentcount',
        pageSize: 5,
        pageNo:0,
        totalCount:0,
        receiveData:'receiveData',
        isActivePre:true,
        isActiveNxet:true,
      },
    }
  },
  methods:{
    enjoycontrol(){
        this.isactive=!this.isactive
    },
    sendMessage(anwserInfo){
      if(anwserInfo.messageContent==''||anwserInfo.messageName==''){
        return;
      }
      this.isloading = true;
      request({
        url: this.currequest.addUrl,
        method:"POST",
        data:{
          comment:anwserInfo
        }
      }).then(res=>{
        this.isanwser = false;
        this.anwserInfo.messageContent = '';
        this.anwserInfo.messageFaId = 0;
        this.flush(1);
      })
    },
    replyMessage(id,anwserName){
      this.isanwser=true;
      this.anwserInfo.messageFaId = id;
      this.anwserInfo.anwserName = "@"+anwserName+" ";
      this.anwserInfo.messageContent = '';
    },
    getTime(time){
      let date = new Date(time);
      let y = date.getFullYear();
      let M = date.getMonth()+1>=10 ? date.getMonth()+1: "0" + (date.getMonth()+1);
      let d = date.getDate()>=10 ? date.getDate(): "0" + date.getDate();
      let h = date.getHours()>=10 ? date.getHours(): "0" + date.getHours();
      let m = date.getMinutes()>=10 ? date.getMinutes(): "0" + date.getMinutes();
      let s = date.getSeconds()>=10 ? date.getSeconds(): "0" + date.getSeconds();
      return y + "-" + M + "-" + d + " " + h + ":" + m +":" + s;
    },
    cancelAnwser(){
      this.isanwser = false;
    },
    check(){
      var totalPage = Math.ceil(this.limitConfig.totalCount/this.limitConfig.pageSize);
      this.limitConfig.isActivePre = this.limitConfig.pageNo==1 ? false : true;
      this.limitConfig.isActiveNxet = this.limitConfig.pageNo >= totalPage  ? false : true;
    },
    preAndNextevent(config) {
      request({
        url: config.url+`/${config.pageNo}/${config.pageSize}`,
        method:'GET'
      }).then(res=>{
        this.dataList =  res.data.dataList;
      }).catch(err=>{
      })
    },
    flush(flag){
      this.isloading = false;
      this.anwserInfo.messageContent='';
      if(flag>=1){
        this.msg = '操作成功';
        this.preAndNextevent(this.limitConfig)
        this.getcount();
      }else{
        this.msg = '操作失败';
      }
    },
    receiveData(data,stauts){
      this.isloading = false;
      this.dataList = data;
    },
    getcount(){
      request({
        url: this.currequest.countUrl,
        method:'GET',
      }).then(res=>{
        this.totalCount  = res.data.count;
        this.limitConfig.totalCount = res.data.frontCount;
        this.check();
      })
    }
  },
  mounted() {
    this.getcount();
    var items = document.querySelectorAll('.enjoys i')
    // var textarea = document.querySelector('textarea')
    for (let i = 0; i < items.length; i++) {
      items[i].addEventListener('click',()=>{
        this.anwserInfo.messageContent += items[i].innerHTML
      })
    }
  }
}
</script>

<style scoped>
.message {
  min-height: 100vh;
  background-color: rgba(249, 249, 249, .9);
  border-top: 1px solid transparent;
}
.comment-head{
  margin: 1rem 0;
  padding: 1rem;
  text-align: center;
  border-bottom: 3px solid #ffff00;
  box-shadow: 0px 5px 5px #ffff00;
}
h2{
  display: inline-block;
  color: #41a8a5;
  text-shadow: 0 0 5px #41a8a5;
}
.comment-edit{
  position: relative;
  width: 60%;
  margin: 1rem auto;
}
.enjoys{
  position: absolute;
  background-color: #dddddd;
  left: 0;
  bottom: 0;
  transform: translateY(100%);
  z-index: 100;
}
.enjoys i{
  display: inline-block;
  width: 25px;
  height: 25px;
  font-style: normal;
  margin: 3px!important;
  cursor: pointer;
  transition: all .5s linear;
}
.enjoys i:hover{
  transform: scale(1.2);
}
.user-info{
  display: flex;
}
input[type]{
  outline: none;
  padding: 0 .3rem;
  width: 100%;
  height: 2rem;
  box-sizing: border-box;
  color: #0077aa;
  border: 1px dotted #41a8a5;
  border-radius: 5px;
}
input:focus,textarea:focus{
  border: 1px dotted #ff0000;
}
.anwser_name{
  display: flex;
  width: 100%;
}

.comment-edit textarea{
  width: 100%;
  height: 150px;
  outline: none;
  padding: .5rem;
  box-sizing: border-box;
  border: none;
  vertical-align: middle;
}
.control{
  text-align: right;
  background-color: #FFFFFF;
  border: 5px;
}
.enjoy,.send{
  display: inline-block;
  padding: 0 .5rem;
}
.enjoy span{
  font-size: 1.5rem;
}
.enjoy:hover{
  color: red;
  text-shadow: 0 0 5px #ff0000;
}
.send button{
  font-size: 14px;
  width: 55px;
  height: 30px;
  border-radius: 5px;
  background-color: #49B1F5;
  transition: all .5s linear;
}
.send button:hover{
  transform: scale(1.1);
  box-shadow: 0 0 5px #49B1F5;
}
.comment-show{
  margin-top: 1rem;;
  min-height: 100vh;
}
.comment-show-title >span{
  font-size: 2rem;
  margin: 0 1rem;
  font-weight: bold;
}
.user-comment{
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 2rem;
  border-bottom: 1px dotted #41a8a5 ;
}
.comment-info{
  position: relative;
  width: 100%;
  margin: 1rem 0;
}

.comment-info >span{
  color: #1abc9c;
  margin-right: 5px;
}
.photo,.sub_photo{
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 25px;
  margin-right: 5px;
}
.sub_photo{
  width: 35px;
  height: 35px;
  border-radius: 17.5px;
}
img {
  width: 100%;
  height: 100%;

}
.username{
  color: #000000;
  text-shadow: 0 0 5px #000000;
}
.comment-time{
  margin-top: 10px;
  font-size: .9rem;
  color: #54BC4B;
}
.sub_comment{
  width: 100%;
  margin-left: 1.2rem;
}
.back{
  position: absolute;
  width: 50px;
  line-height: 30px;
  right: 0;
  bottom: 0;
  transform: translateY(100%);
  text-align: center;
  font-size: .8rem;
  background-color: #0077aa;
  border-radius: 5px;
  transition: all .5s linear;
}

.back:hover{
  box-shadow: 0 0 10px #03e9f4;
}

@media only screen and (max-width: 950px) {
  .comment-edit{
    width: 100%;
  }
  .user-comment{
    padding: 1rem .5rem;
  }
  .anwser_name button{
    font-size: 14px;
  }
}
</style>